<template>
  <div
    class="draggable-section relative group transition-all duration-200"
    :class="{
      'dragging': isDragging,
      'drag-over-top': isDragOverTop,
      'drag-over-bottom': isDragOverBottom,
      'drag-over-center': isDragOverCenter
    }"
    draggable="true"
    @dragstart="handleDragStart"
    @dragend="handleDragEnd"
    @dragover="handleDragOver"
    @dragenter="handleDragEnter"
    @dragleave="handleDragLeave"
    @drop="handleDrop"
  >
    <!-- 拖拽手柄 -->
    <div
      class="drag-handle absolute -left-8 top-4 w-6 h-6 cursor-move opacity-0 group-hover:opacity-100 transition-all duration-200 flex items-center justify-center hover:bg-gray-100 rounded"
    >
      <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
        <path d="M7 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
      </svg>
    </div>

    <!-- 顶部放置指示器 -->
    <div
      v-if="isDragOverTop"
      class="drop-indicator-top absolute -top-1 left-0 right-0 h-0.5 bg-blue-500 rounded-full shadow-lg"
    ></div>

    <!-- 底部放置指示器 -->
    <div
      v-if="isDragOverBottom"
      class="drop-indicator-bottom absolute -bottom-1 left-0 right-0 h-0.5 bg-blue-500 rounded-full shadow-lg"
    ></div>

    <!-- 中心放置指示器 -->
    <div
      v-if="isDragOverCenter"
      class="drop-indicator-center absolute inset-0 border-2 border-blue-500 border-dashed rounded-lg bg-blue-50 bg-opacity-50"
    ></div>

    <!-- 内容区域 -->
    <div
      class="content-wrapper transition-all duration-200"
      :class="{
        'opacity-50 scale-95': isDragging,
        'transform translate-y-1': isDragOverTop,
        'transform -translate-y-1': isDragOverBottom
      }"
    >
      <slot />
    </div>

    <!-- 拖拽指示器 -->
    <div
      v-if="isDragging"
      class="drag-indicator absolute -left-2 top-0 w-1 h-full bg-blue-500 rounded-full shadow-lg"
    ></div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  sectionId: string
  index: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'drag-start': [index: number]
  'drag-end': []
  'drag-over': [index: number]
  'drop': [fromIndex: number, toIndex: number]
}>()

const isDragging = ref(false)
const isDragOverTop = ref(false)
const isDragOverBottom = ref(false)
const isDragOverCenter = ref(false)
const dragEnterCount = ref(0)

// 开始拖拽
const handleDragStart = (e: DragEvent) => {
  isDragging.value = true
  emit('drag-start', props.index)
  
  // 设置拖拽数据
  if (e.dataTransfer) {
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData('text/plain', JSON.stringify({
      sectionId: props.sectionId,
      index: props.index
    }))
  }
}

// 结束拖拽
const handleDragEnd = () => {
  isDragging.value = false
  isDragOverTop.value = false
  isDragOverBottom.value = false
  isDragOverCenter.value = false
  dragEnterCount.value = 0
  emit('drag-end')
}

// 拖拽进入
const handleDragEnter = (e: DragEvent) => {
  e.preventDefault()
  dragEnterCount.value++
  
  if (e.dataTransfer) {
    e.dataTransfer.dropEffect = 'move'
  }
  
  // 计算拖拽位置
  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
  const y = e.clientY - rect.top
  const height = rect.height
  
  // 根据鼠标位置判断放置区域
  if (y < height * 0.25) {
    isDragOverTop.value = true
    isDragOverBottom.value = false
    isDragOverCenter.value = false
  } else if (y > height * 0.75) {
    isDragOverTop.value = false
    isDragOverBottom.value = true
    isDragOverCenter.value = false
  } else {
    isDragOverTop.value = false
    isDragOverBottom.value = false
    isDragOverCenter.value = true
  }
  
  emit('drag-over', props.index)
}

// 拖拽离开
const handleDragLeave = (e: DragEvent) => {
  dragEnterCount.value--
  
  // 只有当完全离开元素时才清除状态
  if (dragEnterCount.value === 0) {
    isDragOverTop.value = false
    isDragOverBottom.value = false
    isDragOverCenter.value = false
  }
}

// 拖拽经过
const handleDragOver = (e: DragEvent) => {
  e.preventDefault()
  
  if (e.dataTransfer) {
    e.dataTransfer.dropEffect = 'move'
  }
  
  // 实时更新拖拽位置
  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
  const y = e.clientY - rect.top
  const height = rect.height
  
  if (y < height * 0.25) {
    isDragOverTop.value = true
    isDragOverBottom.value = false
    isDragOverCenter.value = false
  } else if (y > height * 0.75) {
    isDragOverTop.value = false
    isDragOverBottom.value = true
    isDragOverCenter.value = false
  } else {
    isDragOverTop.value = false
    isDragOverBottom.value = false
    isDragOverCenter.value = true
  }
}

// 放置
const handleDrop = (e: DragEvent) => {
  e.preventDefault()
  
  if (e.dataTransfer) {
    const dragData = e.dataTransfer.getData('text/plain')
    try {
      const { sectionId: draggedSectionId, index: fromIndex } = JSON.parse(dragData)
      
      if (draggedSectionId !== props.sectionId) {
        // 根据放置位置确定目标索引
        let targetIndex = props.index
        if (isDragOverTop.value) {
          targetIndex = props.index
        } else if (isDragOverBottom.value) {
          targetIndex = props.index + 1
        } else if (isDragOverCenter.value) {
          targetIndex = props.index
        }
        
        emit('drop', fromIndex, targetIndex)
      }
    } catch (error) {
      console.error('解析拖拽数据失败:', error)
    }
  }
  
  // 清除状态
  isDragOverTop.value = false
  isDragOverBottom.value = false
  isDragOverCenter.value = false
  dragEnterCount.value = 0
}
</script>

<style scoped>
.draggable-section {
  transition: all 0.2s ease;
  margin-left: 2rem; /* 为拖拽手柄留出空间 */
  border-radius: 8px;
}

.draggable-section.dragging {
  z-index: 1000;
  transform: rotate(2deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.draggable-section.drag-over-top {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.draggable-section.drag-over-bottom {
  transform: translateY(2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.draggable-section.drag-over-center {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  background-color: rgba(59, 130, 246, 0.02);
}

.drag-handle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  transform: scale(1.1);
}

.content-wrapper {
  transition: all 0.2s ease;
  border-radius: 8px;
}

/* 拖拽时的样式 */
.draggable-section[draggable="true"]:hover {
  cursor: move;
}

/* 放置指示器动画 */
.drop-indicator-top,
.drop-indicator-bottom {
  animation: pulse 1.5s infinite;
}

.drop-indicator-center {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scaleX(1);
  }
  50% {
    opacity: 0.7;
    transform: scaleX(1.05);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 拖拽指示器动画 */
.drag-indicator {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
</style>